<template>
  <div>
    <!-- 上传按钮 -->
    <input
      type="file"
      accept="image/*"
      @change="handleFileChange"
      ref="fileInput"
      style="display: none"
    />
    <button @click="openFileInput">上传图片</button>

    <!-- 图片展示和裁剪区域 -->
    <div v-if="selectedImage &&!croppedImage" class="image-crop-container">
      <div class="image-overlay">
        <!-- 可拖动的图片 -->
        <img
          :src="selectedImage"
          alt="Selected Image"
          class="draggable-image"
          :style="{
            left: dragX + 'px',
            top: dragY + 'px',
            transform: `scale(${zoom})`
          }"
          @touchstart="startDrag"
          @touchmove="drag"
          @touchend="endDrag"
        />
        <!-- 圆形裁剪框 -->
        <div class="circle-mask"></div>
      </div>
      <!-- 确定按钮 -->
      <button @click="cropImage" class="confirm-button">确定</button>
    </div>

    <!-- 裁剪后的圆形图片展示 -->
    <img v-if="croppedImage" :src="croppedImage" alt="Cropped Image" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 引用文件输入框
const fileInput = ref(null);
// 选中的图片
const selectedImage = ref('');
// 裁剪后的图片
const croppedImage = ref('');
// 图片拖动的位置
const dragX = ref(0);
const dragY = ref(0);
// 图片缩放比例
const zoom = ref(1);
// 拖动开始的坐标
const startX = ref(0);
const startY = ref(0);
// 拖动状态
const isDragging = ref(false);

// 打开文件选择框
const openFileInput = () => {
  fileInput.value.click();
};

// 处理文件选择事件
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => {
      selectedImage.value = event.target.result;
      // 初始化图片位置
      dragX.value = 0;
      dragY.value = 0;
      zoom.value = 1;
    };
    reader.readAsDataURL(file);
  }
};

// 开始拖动
const startDrag = (e) => {
  isDragging.value = true;
  startX.value = e.touches[0].clientX;
  startY.value = e.touches[0].clientY;
};

// 拖动过程
const drag = (e) => {
  if (isDragging.value) {
    const dx = e.touches[0].clientX - startX.value;
    const dy = e.touches[0].clientY - startY.value;
    dragX.value += dx;
    dragY.value += dy;
    startX.value = e.touches[0].clientX;
    startY.value = e.touches[0].clientY;
  }
};

// 结束拖动
const endDrag = () => {
  isDragging.value = false;
};

// 裁剪图片
const cropImage = () => {
  const img = new Image();
  img.src = selectedImage.value;
  img.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const container = document.querySelector('.image-overlay');
    const mask = document.querySelector('.circle-mask');
    const maskWidth = mask.offsetWidth;
    const maskHeight = mask.offsetHeight;
    const maskX = container.offsetLeft + (container.offsetWidth - maskWidth) / 2;
    const maskY = container.offsetTop + (container.offsetHeight - maskHeight) / 2;

    canvas.width = maskWidth;
    canvas.height = maskHeight;

    ctx.beginPath();
    ctx.arc(maskWidth / 2, maskHeight / 2, maskWidth / 2, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.clip();

    const imgX = (-dragX.value / zoom.value) - (container.offsetLeft - maskX);
    const imgY = (-dragY.value / zoom.value) - (container.offsetTop - maskY);
    ctx.drawImage(img, imgX, imgY, img.width * zoom.value, img.height * zoom.value);

    debugger
    croppedImage.value = canvas.toDataURL('image/png');
    // 裁剪完成后隐藏裁剪区域
    selectedImage.value = '';
  };
};
</script>

<style scoped>
.image-crop-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draggable-image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}

.circle-mask {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: transparent;
  pointer-events: none;
}

.confirm-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10; /* 确保确认按钮在最上方 */
}
</style>